<script setup lang="ts">
import { ref, computed } from 'vue'
import { Trophy, Star, Medal, Collection, Lock } from '@element-plus/icons-vue'

interface Achievement {
  id: number
  title: string
  description: string
  icon: string
  category: 'daily' | 'goal' | 'special' | 'milestone'
  progress: number
  total: number
  status: 'locked' | 'in_progress' | 'completed'
  reward: {
    type: 'badge' | 'title' | 'theme'
    name: string
  }
  unlockDate?: string
}

const achievements = ref<Achievement[]>([
  {
    id: 1,
    title: '连续记录达人',
    description: '连续记录日记30天',
    icon: '📝',
    category: 'daily',
    progress: 7,
    total: 30,
    status: 'in_progress',
    reward: {
      type: 'badge',
      name: '记录之星',
    },
  },
  {
    id: 2,
    title: '目标完成者',
    description: '完成10个目标',
    icon: '🎯',
    category: 'goal',
    progress: 3,
    total: 10,
    status: 'in_progress',
    reward: {
      type: 'badge',
      name: '目标达人',
    },
  },
  {
    id: 3,
    title: '里程碑大师',
    description: '完成50个里程碑',
    icon: '🏆',
    category: 'milestone',
    progress: 15,
    total: 50,
    status: 'in_progress',
    reward: {
      type: 'title',
      name: '里程碑大师',
    },
  },
  {
    id: 4,
    title: '时空探索者',
    description: '解锁所有主题',
    icon: '🌌',
    category: 'special',
    progress: 2,
    total: 5,
    status: 'in_progress',
    reward: {
      type: 'theme',
      name: '时空探索者',
    },
  },
  {
    id: 5,
    title: '完美记录',
    description: '连续记录日记100天',
    icon: '🌟',
    category: 'daily',
    progress: 0,
    total: 100,
    status: 'locked',
    reward: {
      type: 'badge',
      name: '完美记录者',
    },
  },
])

const activeCategory = ref('all')
const categories = [
  { label: '全部成就', value: 'all', icon: Collection },
  { label: '日常成就', value: 'daily', icon: Star },
  { label: '目标成就', value: 'goal', icon: Trophy },
  { label: '里程碑', value: 'milestone', icon: Medal },
  { label: '特殊成就', value: 'special', icon: Lock },
]

const filteredAchievements = computed(() => {
  if (activeCategory.value === 'all') return achievements.value
  return achievements.value.filter((achievement) => achievement.category === activeCategory.value)
})

const getStatusColor = (status: string) => {
  const colors = {
    completed: 'var(--laser-cyan)',
    in_progress: 'var(--supernova-orange)',
    locked: 'var(--hologram-purple)',
  }
  return colors[status as keyof typeof colors] || 'var(--text-secondary)'
}

const getCategoryClass = (category: string) => {
  return `category-${category}`
}
</script>

<template>
  <div class="achievements-container">
    <el-card class="header-card">
      <div class="header-content">
        <div class="title-section">
          <h2>成就殿堂</h2>
          <p>收集成就，解锁更多精彩内容</p>
        </div>
        <div class="stats-section">
          <div class="stat-item">
            <div class="stat-value">
              {{ achievements.filter((a) => a.status === 'completed').length }}
            </div>
            <div class="stat-label">已解锁成就</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ achievements.length }}</div>
            <div class="stat-label">总成就数</div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="achievements-card">
      <template #header>
        <div class="card-header">
          <el-tabs v-model="activeCategory" class="category-tabs">
            <el-tab-pane
              v-for="category in categories"
              :key="category.value"
              :name="category.value"
            >
              <template #label>
                <el-icon><component :is="category.icon" /></el-icon>
                <span>{{ category.label }}</span>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>

      <div class="achievements-grid">
        <el-card
          v-for="achievement in filteredAchievements"
          :key="achievement.id"
          class="achievement-card"
          :class="[achievement.status, getCategoryClass(achievement.category)]"
        >
          <div class="achievement-icon">
            <span class="icon-emoji">{{ achievement.icon }}</span>
            <el-icon v-if="achievement.status === 'locked'" class="lock-icon">
              <Lock />
            </el-icon>
          </div>

          <div class="achievement-content">
            <div class="achievement-title">{{ achievement.title }}</div>
            <div class="achievement-description">{{ achievement.description }}</div>

            <div class="achievement-progress">
              <el-progress
                :percentage="(achievement.progress / achievement.total) * 100"
                :color="getStatusColor(achievement.status)"
                :show-text="false"
                :stroke-width="4"
              />
              <div class="progress-text">{{ achievement.progress }}/{{ achievement.total }}</div>
            </div>

            <div class="achievement-reward">
              <el-tag :type="achievement.status === 'completed' ? 'success' : 'info'" size="small">
                {{ achievement.reward.name }}
              </el-tag>
            </div>

            <div v-if="achievement.unlockDate" class="achievement-date">
              解锁于 {{ achievement.unlockDate }}
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.achievements-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  h2 {
    margin: 0;
    font-size: 24px;
    background: var(--wormhole-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  p {
    margin: 5px 0 0;
    color: var(--text-secondary);
  }
}

.stats-section {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--laser-cyan);
  margin-bottom: 5px;
  text-shadow: 0 0 10px rgba(0, 255, 209, 0.5);
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.achievements-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-tabs {
  :deep(.el-tabs__nav-wrap::after) {
    background-color: var(--border-color);
  }

  :deep(.el-tabs__item) {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;

    &.is-active {
      color: var(--laser-cyan);
    }

    &:hover {
      color: var(--laser-cyan);
    }
  }

  :deep(.el-tabs__active-bar) {
    background-color: var(--laser-cyan);
    height: 2px;
  }
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.achievement-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-shadow);
  }

  &.completed {
    border-color: var(--laser-cyan);
  }

  &.in_progress {
    border-color: var(--supernova-orange);
  }

  &.locked {
    border-color: var(--hologram-purple);
    opacity: 0.8;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.8;
  }

  &.category-daily::before {
    background: var(--laser-cyan);
  }

  &.category-goal::before {
    background: var(--supernova-orange);
  }

  &.category-milestone::before {
    background: var(--hologram-purple);
  }

  &.category-special::before {
    background: var(--quantum-blue);
  }
}

.achievement-icon {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border-radius: 50%;
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;

  .icon-emoji {
    font-size: 30px;
  }

  .lock-icon {
    position: absolute;
    bottom: -5px;
    right: -5px;
    font-size: 20px;
    color: var(--hologram-purple);
    background: var(--bg-card);
    border-radius: 50%;
    padding: 2px;
  }
}

.achievement-card:hover .achievement-icon {
  transform: scale(1.1);
  border-color: var(--laser-cyan);
  box-shadow: 0 0 20px rgba(0, 255, 209, 0.3);
}

.achievement-content {
  text-align: center;
}

.achievement-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.achievement-description {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.6;
}

.achievement-progress {
  margin-bottom: 15px;
}

.progress-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 5px;
}

.achievement-reward {
  margin-bottom: 10px;
}

.achievement-date {
  font-size: 12px;
  color: var(--text-secondary);
}

:deep(.el-tag) {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);

  &.el-tag--success {
    background: rgba(0, 255, 209, 0.1);
    border-color: var(--laser-cyan);
    color: var(--laser-cyan);
  }

  &.el-tag--info {
    background: rgba(102, 51, 255, 0.1);
    border-color: var(--hologram-purple);
    color: var(--hologram-purple);
  }
}
</style>
